<template>
  <div class="admin-user">
    <div class="user-search">
      <el-input placeholder="请输入用户名..." v-model="searchInput">
        <template slot="append">
          <el-button>搜索</el-button>
        </template>
      </el-input>
    </div>
    <div class="user-table">
      <el-table :data="tableData" stripe style="width: 100%">
        <el-table-column prop="index" label="序号">
        </el-table-column>
        <el-table-column prop="id" label="用户ID">
        </el-table-column>
        <el-table-column prop="userEmail" label="用户名">
        </el-table-column>
        <el-table-column prop="nickname" label="昵称">
        </el-table-column>
        <el-table-column prop="gender" label="性别">
        </el-table-column>
        <el-table-column prop="address" label="操作">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.$index,scope.row.id)" type="text" size="small">查看</el-button>
            <el-button type="text" size="small" @click="$refs.mydrawer.open(scope.row.id,'1')">操作</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="dialog">
      <el-dialog title="用户信息" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
        <div class="item">
          <div class="item-title"><i>ID:</i><span>{{itemData.id}}</span></div>
          <div class="item-title"><i>用户名:</i><span>{{itemData.userEmail}}</span></div>
          <div class="item-title"><i>昵称:</i><span>{{itemData.nickname}}</span></div>
          <div class="item-title"><i>性别:</i><span>{{itemData.gender}}</span></div>
          <div class="item-title"><i>账号状态:</i><span>{{ itemData.status === '0' ? '正常' : '禁用' }}</span></div>
          <div class="item-title"><i>注册时间:</i><span>{{itemData.createTime}}</span></div>
        </div>
      </el-dialog>
    </div>
    <MyDrawer ref="mydrawer"></MyDrawer>
  </div>
</template>

<script>
import { getAllUserInfoService } from '@/api/admin'
import MyDrawer from '@/components/admin/MyDrawer.vue'
export default {
  data () {
    return {
      dialogVisible: false,
      searchInput: '',
      tableData: [],
      itemData: {},
      drawer: false

    }
  },
  created () {
    this.getAdminInfo()
  },
  methods: {
    async getAdminInfo () {
      const res = await getAllUserInfoService()
      if (res.status === 0) {
        res.data.forEach((item, index) => {
          item.index = index + 1
          const data = new Date(item.createTime).toJSON()
          item.createTime = new Date(+new Date(data) + 8 * 3600 * 1000)
            .toISOString().slice(0, 10)
        })
        this.tableData = res.data
      }
    },
    handleClose (done) {
      done()
    },
    handleClick (index, id) {
      this.dialogVisible = true
      this.itemData = this.tableData[index]
    }

  },
  components: { MyDrawer }
}
</script>

<style lang="less" scoped>
.admin-user{
    width: 100%;
    height: 100%;
    background: #fff;
    .user-search{
        padding: 20px 20px 0px 20px;
        width: 50%;
    }
    .user-table{
        margin-top: 20px;
        padding: 20px;
        width: 100%;

    }
    .dialog{
      .item{
        .item-title{
          margin: 15px;
        }

        font-size: 14px;
        span{
          font-size: 14px;
          margin-left: 10px;
          font-weight: 700;
        }
      }
    }
}
</style>
